<template>
  <!-- 添加审核人弹出框 -->
  <el-dialog
    :visible.sync="Visible"
    width="60%"
    append-to-body
    title="查看规则"
    :before-close="close"
  >
    <template>
      <el-table :data="tableData" border style="margin-top: 20px" row-key="name">
        <el-table-column label="序号" type="index" width="80" align="center"/>
        <el-table-column prop="ruleName" align="center" label="规则名称"/>
        <el-table-column prop="grade" align="center" label="积分"/>
        <el-table-column prop="count" label="限制次数" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.count == -1">无限值</span>
            <span v-else>{{scope.row.count}}</span>
          </template>
        </el-table-column>
        <!--        <el-table-column label="频率" align="center"/>-->
        <el-table-column prop="once" align="center" label="频率">
          <template slot-scope="scope">
            <span v-if="scope.row.once == 1">一次</span>
            <span v-if="scope.row.once == 2">每天</span>
            <span v-if="scope.row.once == 3">无限</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="是否开启">
<!--          <template slot-scope="scope">-->
<!--            <el-switch-->
<!--              v-model="scope.row.isEnable"-->
<!--              :active-value="1"-->
<!--              @change="statrt(scope.row)"-->
<!--              :inactive-value="0"-->
<!--              active-color="#13ce66"-->
<!--              inactive-color="#ff4949">-->
<!--            </el-switch>-->
<!--          </template>-->
          <template slot-scope="scope">
            <el-tag v-if="scope.row.isEnable == 1">已开启</el-tag>
            <el-tag v-else>未开启</el-tag>
          </template>
        </el-table-column>
        <el-table-column header-align="center" align="center" width="200" label="操作">
          <template slot-scope="scope">
            <span class="btn" @click="setUp(scope.row)">设置</span>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <set-up ref="setUp" @refresh="getList()"></set-up>
    <!--    <div slot="footer" class="dialog-footer">-->
    <!--      <el-button @click="close">取 消</el-button>-->
    <!--      <el-button type="primary" @click="onsubmit" :loading="loading">确定</el-button>-->
    <!--    </div>-->
  </el-dialog>
</template>

<script>
  import SetUp from './setup'

  export default {
    data() {
      return {
        loading: false,
        Visible: false,
        dataForm: {},
        tableData: [],
        maxCount: '',
        parentRuleId: ''
      }
    },
    components: {SetUp},
    methods: {
      init(id, maxCount) {
        this.maxCount = maxCount
        this.parentRuleId = id
        this.Visible = true
        this.loading = false
        this.getList()
      },
      // statrt(row) {
      //   this.$http({
      //     url: this.$http.adornUrl('/integral-admin/integral/rule/enableChildRule'),
      //     method: 'post',
      //     data: {
      //       code: row.code,
      //       count: row.count,
      //       grade: row.grade,
      //       isEnable: row.isEnable ? 1 : 0,
      //       markId: row.id,
      //       ruleId: this.parentRuleId
      //     }
      //   }).then(res => {
      //     if (res.code === 200) {
      //       this.getList()
      //     }
      //     // this.tableData = res.data
      //   })
      // },
      getList() {
        this.$http({
          url: this.$http.adornUrl('/integral-admin/integral/rule/child/list'),
          method: 'post',
          data: {
            parentRuleId: this.parentRuleId
          }
        }).then(res => {
          this.tableData = res.data
          // eslint-disable-next-line no-unused-vars
          // let sum = 0
          // res.data.forEach((x) => {
          //   sum += x.grade * x.count
          // })
        })
      },
      setUp(row) {
        this.$nextTick(() => {
          this.$refs.setUp.init(row, this.maxCount, this.parentRuleId)
        })
      },
      close() {
        this.Visible = false
      },
      onsubmit() {
        this.Visible = false
      }
    }
  }
</script>

<style scoped>
  .btn {
    color: #409EFF;
    cursor: pointer;
  }
</style>
